import axios from "axios"
import Seach from './Seach/seach'
import React, { useEffect, useState, useRef, useCallback } from "react"
import { useNavigate, Outlet } from 'react-router-dom'
import { Swiper, Image } from 'antd-mobile'
import { Grid } from '@nutui/nutui-react'
import { Badge, Avatar, Cell, } from '@nutui/nutui-react'
var ws =new WebSocket('ws://127.0.0.1:8080')
    ws.onopen = function(){
        console.log('连接成功');
    }
    import { Toast } from 'react-vant'
import './css/home.css'
const list = [
    'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1721.jpg',
    'https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1722.jpg',

]
const items = list.map((item, index) => (
    <Swiper.Item key={index}>
        <div

            style={{
                width: "100%",
                height: "21rem",
                backgroundColor: "red",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                fontSize: "4.8rem",
                userSelect: "none",
                boxSizing: "border-box"
            }}

        >

            {
                <img src={item} alt="" style={{
                    width: "100%"
                }} />
            }
        </div>
    </Swiper.Item>
))
const fruit_list=[
    {id:1,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1763-0.png",num:200},
    {id:2,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1763-1.png",num:200},
    {id:3,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1763-2.png",num:200},
    {id:4,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1763-3.png",num:200}
]
const fruit_lists=[
    {id:1,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1752-0.png",num:200},
    {id:2,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1752-1.png",num:200},
    {id:3,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1752-2.png",num:200},
    {id:4,name:'纯天然大苹果',price:60,img:"https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/p-img_u1752-3.png",num:200}
]
let Home = ({ visible, onClose, container }) => {
    let [fruitlist, setfruit] = useState([])

    useEffect(() => {
        const getfruit = async () => {
            await axios.get('http://127.0.0.1:3000/chen/shop_list').then(res => {
                setfruit(res.data.data)
         
            })
        }
        getfruit()

    }, [])
    let navigate = useNavigate()


    //获取商品数据

    // 用于控制回到顶部按钮的显示与隐藏
    const [isVisible, setIsVisible] = useState(false);
    // 检测用户滚动事件
    const handleScroll = () => {
        if (window.scrollY > 200) {
            // 当滚动超过 200px 时显示回到顶部按钮
            setIsVisible(true);
        } else {
            // 否则隐藏按钮
            setIsVisible(false);
        }
    };
    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth', // 平滑滚动
        });
    };
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);

        // 清理事件监听
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);
    let [dengs,setDengs] = useState('')
    ws.onmessage=function (e){
        setDengs(e.data)
    }
    useEffect(()=>{
        if(dengs.length>0){
            Toast.success('pc端登录成功')
        }
        
    },[dengs])
    return (

        <div id="target" style={{
            width: "100%",
            height: "100vh",
            backgroundColor: "#faffef"
        }}>
            <Seach></Seach>

            <div className="button-group">
                <Swiper
                    loop
                    autoplay
                    onIndexChange={i => {

                    }}
                >
                    {items}
                </Swiper>
                <div className="header_cate_box">
                    <Grid className="cate_box">
                        <Grid.Item text="推荐" >
                            <img src="https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1726.png" alt="" />
                        </Grid.Item>
                        <Grid.Item text="水果类">
                            <img src="https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1729.png" alt="" />
                        </Grid.Item>
                        <Grid.Item text="蔬菜类">
                            <img src="https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1732.png" alt="" />
                        </Grid.Item>
                        <Grid.Item text="干果类">
                            <img src="https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1735.png" alt="" />
                        </Grid.Item>
                        <Grid.Item text="粮油类">
                            <img src="https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1738.png" alt="" />
                        </Grid.Item>

                    </Grid>
                </div>
                <div className="header_hot_box">
                    <div className="hot_title">
                        <h1>有奖邀请活动火热进行中...</h1>
                        <span className="title_item">活动日期：10.10-12.12</span>
                        <img className="rotate" src="https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1744.png" alt="" />
                    </div>
                </div>

                <div className="shop_list_box">
                    <div className="shop_list_item">
                        <hr className="hr1" />
                        <span className="item_title">

                            最新上架
                            <Cell className="call">
                                <Badge className="badge" value="NEW" />
                            </Cell>
                        </span>

                        <hr className="hr1" />
                    </div>
                    <div className="shop_list_fruit_box">

                        {fruit_lists.map(item => {
                            return <div className="fruit_box_item" key={item._id}>
                                <Cell>
                                    <Image className="fruit_img" lazy src={item.img} alt="" />

                                    <span className="fruit_title">{item.name}
                                        &nbsp;
                                        (500g)</span> <br />
                                    <p className="fruit_title1">纯天然种植 | 自然生长</p>
                                    <span className="fruit_price">￥{item.price}.00</span>
                                </Cell>

                            </div>

                        })}


                    </div>

                    <div className="shop_list_item1">

                        <hr className="hr1" />
                        <span className="item_title">

                            热卖商品
                            <Cell className="call">
                                <Badge className="badge1" value="Hot" />
                            </Cell>
                        </span>

                        <hr className="hr1" />

                    </div>
                    <div className="shop_list_fruit_box1" key={"1"}>
                        {fruit_list.map(item => {
                            return <div className="fruit_box_item1" key={item._id}>

                                <img src={item.img} alt="" className="fruit_image" />
                                <span className="fruit_titles">{item.name} &nbsp; (500kg)</span>
                                <p className="fruit_p">纯天然种植 | 自然生长 | 绿色食品</p>
                                <span className="fruit_price1">￥{item.price}.00</span>

                            </div>
                        })}

                    </div>
                </div>
                <div className="shop_list_item2">
                    <hr className="hr1" />
                    <span className="item_title">

                        更多推荐
                        <Cell className="call">
                            <Badge className="badge3" value="NEW" />
                        </Cell>
                    </span>

                    <hr className="hr1" />
                </div>
                <div className="shop_list_fruit_box1">
                    {fruitlist.map(item => {
                        return <div className="fruit_box_item1" key={item._id}>

                            <img src={item.image} alt="" className="fruit_image" />
                            <span className="fruit_titles">{item.name} &nbsp; (500kg)</span>
                            <p className="fruit_p">纯天然种植 | 自然生长 | 绿色食品</p>
                            <span className="fruit_price1">￥{item.price}.00</span>

                        </div>
                    })}

                </div>
                <div className="divss">
                    
                </div>
                {isVisible && (
                    <button
                        className="backTop"
                        onClick={scrollToTop}
                    >
                        <img className="backTop_img" src="https://cdn7.axureshop.com/demo2024/2188150/images/%E9%A6%96%E9%A1%B5_2/u1838.png" alt="" />
                    </button>
                )}

            </div>
        </div>


    )
}

export default Home